<template>
  <div class="myInfo">
    <navBar title="我的资料" @click.native="$router.push('/home/my')"></navBar>
    <div class="include">
      <div class="top-avatar">
        <mycell
          class="circle"
          title="头像"
          type="img"
          :value="userInfo.avatar"
        ></mycell>
      </div>
      <div class="userInfo">
        <mycell title="昵称" :value="userInfo.nickname"></mycell>
        <mycell
          title="性别"
          :value="genderObj[userInfo.gender]"
          @click.native="isShow = true"
        ></mycell>
        <mycell title="地区" :value="area.city_list[150200]"></mycell>
        <mycell title="个人简介" :value="userInfo.intro"></mycell>
      </div>
      <van-button color="#fff" block @click="exit"
        ><span class="red">退出登录</span></van-button
      >
    </div>
    <!-- 弹出层 -->
    <van-popup v-model="isShow" position="bottom">
      <!-- 选择器 -->
      <van-picker
        title="选择性别"
        show-toolbar
        :columns="Object.values(genderObj)"
        :default-index='userInfo.gender'
        @confirm="changeGender"
        @cancel="isShow = false"
      ></van-picker>
    </van-popup>
  </div>
</template>

<script>
import mycell from './mycell'
// 导入
import { mapState } from 'vuex'
// 导入地图
import area from '@/assets/area.js'
// 导入token
import { removeLocal } from '@/utile/local.js'
export default {
  components: { mycell },
  computed: {
    ...mapState(['userInfo'])
  },

  data () {
    return {
      area: area,
      genderObj: {
        0: '保密',
        1: '男',
        2: '女'
      },
      isShow: false
    }
  },
  methods: {
    //   点击退出
    exit () {
      this.$dialog
        .confirm({
          title: '退出',
          message: '确定退出吗？'
        })
        .then(() => {
          // 确定退出
          // 删除token
          removeLocal()
          // 修改状态
          this.$store.commit('loginStatus', false)
          // 跳回到登录页
          this.$router.push('/login')
        })
        .catch(() => {})
    },
    // 确定选择 性别
    changeGender (value, index) {
      console.log('当前性别', value, index)
      this.isShow = false
    }
  }
}
</script>

<style lang="less" scoped>
.myInfo {
  height: 100%;
  background-color: #f7f4f5;
  .include {
    padding: 0 @p15;
    //  height: 100%;
    .top-avatar {
      padding: 20px 0;

      .circle {
        border-radius: 8px;
      }
    }
    .userInfo {
      padding-bottom: 20px;
      border-radius: 8px;
    }
    .red {
      color: #e71c4c;
      border-radius: 8px;
    }
  }
}
</style>
